'use client';

import React, { useState } from 'react';
import Card from '@/components/ui/Card';
import Button from '@/components/ui/Button';
import Badge from '@/components/ui/Badge';
import { 
  Upload, 
  Play, 
  Settings, 
  BarChart3, 
  Cpu, 
  CheckCircle,
  AlertCircle,
  Brain,
  Zap
} from 'lucide-react';

export default function LargeModelPage() {
  const [showDatasetImport, setShowDatasetImport] = useState(false);
  const [showHyperparams, setShowHyperparams] = useState(false);

  return (
    <div className="space-y-6">
      {/* 页面标题 */}
      <div className="flex items-center justify-between rounded-lg px-4 py-3">
        <div>
          <h1 className="text-xl font-bold text-gray-900">大模型开放进化</h1>
          <p className="text-sm text-gray-600 mt-0.5">电力大模型增量学习</p>
        </div>
        <div className="flex gap-3">
          <Button
            onClick={() => setShowDatasetImport(true)}
            variant="primary"
            size="sm"
          >
            <Upload className="h-4 w-4 mr-2" />
            导入数据集
          </Button>
          <Button
            onClick={() => setShowHyperparams(true)}
            variant="secondary"
            size="sm"
          >
            <Settings className="h-4 w-4 mr-2" />
            配置超参数
          </Button>
        </div>
      </div>

      {/* 模型状态卡片 */}
      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
        <Card className="p-6">
          <div className="flex items-center justify-between">
            <div>
              <h3 className="text-lg font-semibold text-gray-900">模型状态</h3>
              <p className="text-2xl font-bold text-green-600 mt-2">已加载</p>
            </div>
            <Brain className="h-12 w-12 text-blue-600" />
          </div>
          <div className="mt-4 space-y-2">
            <div className="flex justify-between text-sm">
              <span className="text-gray-600">模型类型:</span>
              <Badge variant="info">Large Model</Badge>
            </div>
            <div className="flex justify-between text-sm">
              <span className="text-gray-600">精度:</span>
              <span className="font-medium">FP16</span>
            </div>
            <div className="flex justify-between text-sm">
              <span className="text-gray-600">设备:</span>
              <span className="font-medium">CUDA</span>
            </div>
          </div>
        </Card>

        <Card className="p-6">
          <div className="flex items-center justify-between">
            <div>
              <h3 className="text-lg font-semibold text-gray-900">训练进度</h3>
              <p className="text-2xl font-bold text-blue-600 mt-2">50.0%</p>
            </div>
            <BarChart3 className="h-12 w-12 text-green-600" />
          </div>
          <div className="mt-4">
            <div className="w-full bg-gray-200 rounded-full h-2">
              <div 
                className="bg-blue-600 h-2 rounded-full transition-all duration-300"
                style={{ width: '50%' }}
              />
            </div>
            <div className="mt-2 text-sm text-gray-600">
              Epoch 5/10 • Step 1250/2500
            </div>
          </div>
        </Card>

        <Card className="p-6">
          <div className="flex items-center justify-between">
            <div>
              <h3 className="text-lg font-semibold text-gray-900">模型精度</h3>
              <p className="text-2xl font-bold text-green-600 mt-2">85.0%</p>
            </div>
            <Zap className="h-12 w-12 text-yellow-600" />
          </div>
          <div className="mt-4 space-y-2">
            <div className="flex justify-between text-sm">
              <span className="text-gray-600">验证精度:</span>
              <span className="font-medium">82.0%</span>
            </div>
            <div className="flex justify-between text-sm">
              <span className="text-gray-600">F1 Score:</span>
              <span className="font-medium">0.850</span>
            </div>
            <div className="flex justify-between text-sm">
              <span className="text-gray-600">损失:</span>
              <span className="font-medium">0.450</span>
            </div>
          </div>
        </Card>
      </div>

      {/* 主要功能区域 */}
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        {/* 模型管理 */}
        <Card className="p-6">
          <h3 className="text-xl font-semibold text-gray-900 mb-4">模型管理</h3>
          <div className="space-y-4">
            <div className="flex items-center justify-between p-4 border rounded-lg">
              <div>
                <h4 className="font-medium text-gray-900">PowerGrid-BERT-Large</h4>
                <p className="text-sm text-gray-600">电力领域大语言模型</p>
              </div>
              <div className="flex items-center gap-2">
                <Badge variant="success">运行中</Badge>
                <Button size="sm" variant="secondary">
                  <Play className="h-4 w-4 mr-1" />
                  启动
                </Button>
              </div>
            </div>
            
            <div className="flex gap-2">
              <Button className="flex-1 bg-blue-600 hover:bg-blue-700 text-white">
                <Upload className="h-4 w-4 mr-2" />
                加载新模型
              </Button>
              <Button variant="secondary" className="flex-1">
                <Settings className="h-4 w-4 mr-2" />
                模型配置
              </Button>
            </div>
          </div>
        </Card>

        {/* 量化管理 */}
        <Card className="p-6">
          <h3 className="text-xl font-semibold text-gray-900 mb-4">模型量化</h3>
          <div className="space-y-4">
            <div className="grid grid-cols-2 gap-4">
              <div className="p-4 border rounded-lg text-center">
                <Cpu className="h-8 w-8 text-blue-600 mx-auto mb-2" />
                <h4 className="font-medium">INT8 量化</h4>
                <p className="text-sm text-gray-600 mb-3">8位整数量化</p>
                <Button size="sm" className="w-full">
                  开始量化
                </Button>
              </div>
              <div className="p-4 border rounded-lg text-center">
                <Cpu className="h-8 w-8 text-green-600 mx-auto mb-2" />
                <h4 className="font-medium">INT4 量化</h4>
                <p className="text-sm text-gray-600 mb-3">4位整数量化</p>
                <Button size="sm" className="w-full">
                  开始量化
                </Button>
              </div>
            </div>
            
            <div className="p-4 bg-gray-50 rounded-lg">
              <h5 className="font-medium text-gray-900 mb-2">量化配置</h5>
              <div className="space-y-2 text-sm">
                <div className="flex justify-between">
                  <span className="text-gray-600">目标精度下降:</span>
                  <span className="font-medium">&lt; 5%</span>
                </div>
                <div className="flex justify-between">
                  <span className="text-gray-600">校准数据集:</span>
                  <span className="font-medium">已配置</span>
                </div>
              </div>
            </div>
          </div>
        </Card>
      </div>

      {/* 知识协同样本处理 */}
      <Card className="p-6">
        <h3 className="text-xl font-semibold text-gray-900 mb-4">知识协同样本处理</h3>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div>
            <h4 className="font-medium text-gray-900 mb-3">处理配置</h4>
            <div className="space-y-4">
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">
                  处理类型
                </label>
                <select className="w-full p-2 border border-gray-300 rounded-md">
                  <option value="distillation">知识蒸馏</option>
                  <option value="transfer">迁移学习</option>
                  <option value="alignment">对齐学习</option>
                </select>
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">
                  温度参数
                </label>
                <input 
                  type="number" 
                  defaultValue="3.0" 
                  step="0.1"
                  className="w-full p-2 border border-gray-300 rounded-md"
                />
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">
                  Alpha 参数
                </label>
                <input 
                  type="number" 
                  defaultValue="0.7" 
                  step="0.1"
                  className="w-full p-2 border border-gray-300 rounded-md"
                />
              </div>
            </div>
          </div>
          
          <div>
            <h4 className="font-medium text-gray-900 mb-3">处理状态</h4>
            <div className="space-y-3">
              <div className="flex items-center justify-between p-3 bg-green-50 rounded-lg">
                <div className="flex items-center">
                  <CheckCircle className="h-5 w-5 text-green-600 mr-2" />
                  <span className="text-sm font-medium">样本预处理</span>
                </div>
                <Badge variant="success">完成</Badge>
              </div>
              <div className="flex items-center justify-between p-3 bg-blue-50 rounded-lg">
                <div className="flex items-center">
                  <AlertCircle className="h-5 w-5 text-blue-600 mr-2" />
                  <span className="text-sm font-medium">知识蒸馏</span>
                </div>
                <Badge variant="info">进行中</Badge>
              </div>
              <div className="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                <div className="flex items-center">
                  <AlertCircle className="h-5 w-5 text-gray-400 mr-2" />
                  <span className="text-sm font-medium">质量评估</span>
                </div>
                <Badge variant="default">等待中</Badge>
              </div>
            </div>
            
            <Button className="w-full mt-4 bg-blue-600 hover:bg-blue-700 text-white">
              开始处理
            </Button>
          </div>
        </div>
      </Card>

      {/* 数据集导入模态框 */}
      {showDatasetImport && (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
          <div className="bg-white p-6 rounded-lg max-w-md w-full mx-4">
            <h3 className="text-lg font-semibold text-gray-900 mb-4">导入增量学习数据集</h3>
            <div className="space-y-4">
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">
                  数据集名称
                </label>
                <input 
                  type="text" 
                  className="w-full p-2 border border-gray-300 rounded-md"
                  placeholder="输入数据集名称"
                />
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">
                  数据集类型
                </label>
                <select className="w-full p-2 border border-gray-300 rounded-md">
                  <option value="image">图像</option>
                  <option value="text">文本</option>
                  <option value="sequence">序列</option>
                </select>
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">
                  选择文件
                </label>
                <input 
                  type="file" 
                  multiple 
                  className="w-full p-2 border border-gray-300 rounded-md"
                />
              </div>
              <div className="flex gap-3">
                <Button 
                  onClick={() => setShowDatasetImport(false)}
                  variant="secondary" 
                  className="flex-1"
                >
                  取消
                </Button>
                <Button className="flex-1 bg-blue-600 hover:bg-blue-700 text-white">
                  开始导入
                </Button>
              </div>
            </div>
          </div>
        </div>
      )}

      {/* 超参数配置模态框 */}
      {showHyperparams && (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
          <div className="bg-white p-6 rounded-lg max-w-lg w-full mx-4">
            <h3 className="text-lg font-semibold text-gray-900 mb-4">配置超参数</h3>
            <div className="grid grid-cols-2 gap-4">
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">
                  学习率
                </label>
                <input 
                  type="number" 
                  defaultValue="0.001"
                  step="0.0001"
                  className="w-full p-2 border border-gray-300 rounded-md"
                />
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">
                  批次大小
                </label>
                <input 
                  type="number" 
                  defaultValue="32"
                  className="w-full p-2 border border-gray-300 rounded-md"
                />
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">
                  训练轮数
                </label>
                <input 
                  type="number" 
                  defaultValue="10"
                  className="w-full p-2 border border-gray-300 rounded-md"
                />
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">
                  优化器
                </label>
                <select className="w-full p-2 border border-gray-300 rounded-md">
                  <option value="adam">Adam</option>
                  <option value="sgd">SGD</option>
                  <option value="adamw">AdamW</option>
                </select>
              </div>
            </div>
            <div className="flex gap-3 mt-6">
              <Button 
                onClick={() => setShowHyperparams(false)}
                variant="secondary" 
                className="flex-1"
              >
                取消
              </Button>
              <Button className="flex-1 bg-blue-600 hover:bg-blue-700 text-white">
                保存配置
              </Button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
} 